<template>

    <el-menu
        active-text-color="#fff"
        class="el-menu-vertical"
        background-color="#001529"
        text-color="rgba(255, 255, 255, 0.85)"
        :unique-opened="true"
        :collapse=isCollapse
        :default-active="navTabStores.current"
        @open="handleOpen"
        @close="handleClose"
>
    <transition name="router_animate">
    <div>
        <transition name="router_animate">
        <div v-show="!isCollapse" @click="toBilibili"
             style="color: #fff;font-size:20px;line-height: 45px;text-align:center;display: block;cursor:pointer">
            Basic-Admin
        </div>
        </transition>
        <transition name="router_animate">
        <div v-show="isCollapse"  @click="toBilibili" style="display:flex;justify-content:center;align-items:center;cursor:pointer">
            <el-image  style="height:30px;width: 30px;margin:10px;border-radius: 5px" src="./avatar.jpg"/>
        </div>
        </transition>
    </div>
    </transition>
    <el-menu-item index="个人主页"  @click="to({path:'/'}, {name:'个人主页', path:'currHomePage'})">
        <el-icon><User /></el-icon>
        <span>个人主页</span>
    </el-menu-item>
    <el-sub-menu :index="item.path" v-for="item in menu" :key="item.id" class="sub-menu">
        <template #title>
            <el-icon><component :is="item.icon"></component></el-icon>
            <span>{{item.name}}</span>
        </template>
            <el-menu-item :index="sub.name" v-for="sub in item.children" @click="to(item, sub, event)">
                <el-icon><component :is="sub.icon"></component></el-icon>
                {{sub.name}}
            </el-menu-item>
    </el-sub-menu>
    </el-menu>
</template>

<script setup>
    import {onBeforeMount, reactive, computed } from 'vue'
    import {useRouter} from 'vue-router'
    import {openState} from '@/stores/openState'
    import {navTab} from '@/stores/navTab'
    let navTabStores = navTab()
    let menuState = openState()
    const router=useRouter()
    const handleOpen = (key, keyPath) => {
    }
    const handleClose = (key, keyPath) => {
    }
    let isCollapse = computed(function () {
        return !menuState.openState
    })
    let menu =reactive([])
    onBeforeMount (function(){
        let menudb = JSON.parse(sessionStorage.getItem("menus")||"[]")
        menu.push(...menudb)
    })
    function toBilibili() {
        window.open("https://space.bilibili.com/488496371")
    }
    function to(parent, menuItem) {
        let item = { name: menuItem.name, parent:parent, path:parent.path + menuItem.path, clicked:true}
        let result = navTabStores.routeTo(item)
    }
</script>
<style scoped>
    .el-menu-vertical:not(.el-menu--collapse) {
        width: 220px;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .el-menu-vertical {
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
    }
    /*.el-menu-vertical::-webkit-scrollbar {!*整个滚动条*!*/
        /*width: 12px;*/
        /*!*border-radius: 10px;*!*/
        /*-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);*/
        /*opacity: 0.2;*/
        /*background-color: #f8f8f9;*/
    /*}*/
    /*.el-menu-vertical::-webkit-scrollbar-button {!*滚动条上的按钮，上下箭头*!*/
        /*!*width: 0px;*!*/
        /*height: 0;*/
        /*!*border-radius: 10px;*!*/
        /*!*-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);*!*/
        /*!*opacity: 0.2;*!*/
        /*!*background-color: #002c79;*!*/
    /*}*/
    /*.el-menu-vertical::-webkit-scrollbar-thumb {!*滚动条滑块*!*/
        /*width: 12px;*/
        /*border-radius: 5px;*/
        /*-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.71);*/
        /*opacity: 0.2;*/
        /*background-color: #f8f8f9;*/
    /*}*/
    /*.el-menu-vertical::-webkit-scrollbar-track {!*滚动条轨道*!*/
        /*width: 12px;*/
        /*border-radius: 10px;*/
        /*-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);*/
        /*opacity: 0.2;*/
        /*background-color: #f8f8f9;*/
    /*}*/
    .el-menu-item.is-active{
        background-color: #0483e8;
    }
    .el-menu-item:hover{
        background-color: #045ca2;
    }
    .el-menu-item{
        font-size: 14px !important;
        height: 40px !important;
    }
    .router_animate-enter-active {
        animation: fadeInOut .3s;
    }
</style>